<template>
	<view>
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">业务员升级</block>
		</cu-custom>

		<view class="userinfo">
			<view class="user">
				<view class="info">
					<text>{{userInfo.nickname}}</text>
					<view class="vip">
						<!-- <image src="../../static/images/VIP1.png" mode="" style="width: 40rpx;height: 40rpx;">
						</image> -->
						<text class="viptext">{{userVip.name}}</text>
					</view>
				</view>
			</view>
			<view class="tip">
				<text v-if="userVip.vip_time==0">根据各自需要选择开通商家、业务员或者区县代理！</text>
				<text v-else>你的业务员将于{{userVip.vip_time}}到期哦！</text>
			</view>
		</view>
		<view class="card">
			<swiper class="swiper" :current="id" next-margin="40rpx" previous-margin="40rpx" @change="changeSwiper">
				<swiper-item v-for="(item,index) in list" :key="index">
					<view class="vip-card">
						<view class="head">
							<text>{{item.name}}</text>
						</view>
						<view class="cont">
							<!-- <view>
								{{item.name}}
							</view> -->
							<view class="" style="display:flex;justify-content: center;">
								<view class="" style="width:200rpx;">
									<view class="item" @click="selopen(item)">

										<view class="item-cont">
											<text>￥{{item.price}}</text>
										</view>
									</view>
								</view>

							</view>
							<view>
								<view class="padding-sm">
									<radio-group @change="radioChange">
										<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items"
											:key="item.value">
											<view class="uni-list-cell-item" style="margin-top:10px;">
												<radio :value="item.value" :checked="item.value === form.pay_type" />
												<text style="margin-left:5px;">{{item.name}}</text>
											</view>
										</label>
									</radio-group>
								</view>

							</view>
							<view class="add">

								<view class="add-form">
									<form @submit="formSubmit" @reset="formReset">
										<view class="uni-form-item uni-column">
											<view class="title">收货人</view>
											<input class="uni-input" v-model="form.name" name="input"
												placeholder="收货人" />
										</view>
										<view class="uni-form-item uni-column">
											<view class="title">手机号码</view>
											<input class="uni-input" v-model="form.phone" name="input"
												placeholder="手机号码" />
											<text class="right-icon">+86</text>
										</view>
										<!-- #ifndef APP-PLUS || MP-ALIPAY -->
										<view class="uni-form-item uni-column">
											<view class="title">所在地区</view>
											<yhdslplace @change="change">
												<view class="place" :style="place ? 'color: black;' : 'color: grey;'">
													{{ place ? place : '所在地区' }}
												</view>
											</yhdslplace>
										</view>
										<!-- #endif -->
										<view class="uni-form-item uni-column">
											<view class="title">详细地址</view>
											<input class="uni-input" v-model="form.detail" name="input"
												placeholder="详细地址:如道路 门牌号 小区等" />
										</view>


									</form>
								</view>
							</view>
							<view style="margin-top: 30rpx;margin-bottom: 30rpx;">


								<button class="bg-gradual-orange" type="warning" style="width: 300rpx;"
									@click="openVip(item.price)">立即开通
								</button>

							</view>

						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script>
	import yhdslplace from '@/components/yhdsl-place/yhdsl-place.vue';

	// #ifdef H5  || MP
	var wx = require('jweixin-module');
	// #endif

	// #ifdef APP
	import wx from 'weixin-js-sdk'
	// #endif



	import shop from "@/api/shop";
	import {
		mapActions,
		mapState
	} from 'vuex'
	const isWechat = () => {
		return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
	}
	export default {
		data() {
			return {
				place: '',
				items: [{
					name: '微信支付',
					value: 1
				}, {
					name: '余额支付',
					value: 2
				}],
				aid: '',
				form: {
					name: '',
					address_id: '',
					phone: '',
					address: '',
					region: ['北京市', '北京市', '东城区'],
					detail: '',
					is_default: 0,
					pay_type: 2,
				},
				info: {},
				disabled: false,
				loading: false,
				checkeds: false,
				status: '保存',
				userVip: {
					vip_id: 2,
					vip_time: 0,
					name: "业务员"
				},
				list: [{
					id: '2',
					name: '业务员',
					price: 199,
				}, {
					id: '1',
					name: '商家',
					price: 298,
				}, {
					id: '3',
					name: '区县代理',
					price: 36500,
				}],
				selvip: [],
				pay_type: 2,
				id: 0,
				wx_open_id: '',
				appId: 'wx06785591c04f8c56',
				iswechat: false,
				code: '',
			};
		},
		computed: {
			...mapState(['userInfo']),
		},
		components: {
			yhdslplace
		},
		onLoad(e) {
			this.getWechatCode()
		},
		onShow() {
			// #ifdef MP
			this.wxAuthorize()
			// #endif
		},
		methods: {
			change(val) {
				console.log(val.data);
				this.form.region = val.data;

				this.place = val.data.join(',');
			},
			RegionChange(e) {
				if (this.loading || this.disabled) {
					return;
				}
				this.form.region = e.detail.value;
			},
			getWechatCode() {
				if (isWechat) {
					let appid = "wx06785591c04f8c56"; //微信APPid
					let code = this.getUrlCode().code; //是否存在code
					let local = window.location.href;
					if (code == null || code === "") {
						//不存在就打开上面的地址进行授权
						window.location.href =
							"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
							appid +
							"&redirect_uri=" +
							encodeURIComponent(local) +
							"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
					} else {
						this.code = code;
						// alert(this.code)
						this.getCode()
					}
				}
			},
			async getCode() {
				shop.getOpenid({
					code: this.code
				}).then(res => {
					if (res.code == 1) {
						this.disabled = true;
						this.loading = false;
						// this.toast(res.msg);
						// window.location.href = res.data
						// this.status = res.msg;
						console.log('添加成功');
						// this.goBack();
					} else {
						this.loading = false
						// this.toast(res.msg);
					}
				})
			},
			getUrlCode() {
				// 截取url中的code方法
				var url = location.search;
				console.log(url)
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
					}
				}
				console.log(theRequest);
				return theRequest;
			},
			radioChange(evt) {
				// alert(evt.target.value)
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value == evt.target.value) {
						this.form.pay_type = this.items[i].value;
						this.current = i;
						break;
					}
				}
			},
			// RegionChange(e) {
			// 	if (this.loading || this.disabled) {
			// 		return;
			// 	}
			// 	this.form.region = e.detail.value;
			// 	console.log(e.detail.value);
			// },
			async submit() {
				if (this.loading || this.disabled) {
					return;
				}

				this.form.address = this
					.place; //this.form.region[0] + ',' + this.form.region[1] + ',' + this.form.region[2];
				console.log(this.form.address);
				this.loading = true;
				setTimeout(() => {
					this.loading = false
				}, 7000)
				shop.editsAddress(this.form).then(res => {
					if (res.code == 1) {
						this.disabled = true;
						this.loading = true;
						this.toast(res.msg);
						// this.status = res.msg;
						console.log('添加成功');
						// this.goBack();
					} else {
						this.loading = false
						this.toast(res.msg);
					}
				})
			},
			openVip(amount) {
				var that = this;
				this.form.amount = amount

				if (!this.form.name) {
					this.toast('请输入收货人')
					return
				}

				if (!this.form.phone) {
					this.toast('请输入手机号码')
					return
				}

				if (!this.form.detail) {
					this.toast('请输入详细地址')
					return
				}

				// alert(that.pay_type)
				shop.userlevel(this.form).then(res => {
					if (res.code == 0) {
						this.toast(res.msg);
					} else {

						
						let wxpay = res.data.pay;

						

						console.log('===========', res)
						if (this.form.type == 1) {
							console.log('+++++++++', wxpay)
							wx.config({
								debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId: 'wx06785591c04f8c56', // 必填，公众号的唯一标识
								timestamp: wxpay.timeStamp, // 必填，生成签名的时间戳
								nonceStr: wxpay.nonceStr, // 必填，生成签名的随机串
								signature: wxpay.paySign, // 必填，签名
								jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
							})
							wx.ready(function() {
								wx.chooseWXPay({
									timestamp: wxpay.timeStamp, // 时间戳
									nonceStr: wxpay.nonceStr, // 随机数
									package: wxpay.package, //
									signType: 'MD5',
									paySign: wxpay.paySign, // 签名
									success: function() {
										uni.showToast({
											title: '支付成功'
										});
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/my/index'
											});
										}, 2000);
									},
									cancel: function() {
										uni.showToast({
											title: '取消支付',
											icon: 'none'
										});
										// setTimeout(() => {
										// 	uni.navigateTo({
										// 		url: `/pages_pay/dzf/index`
										// 	});
										// }, 2000);
									},
									fail: function() {
										uni.showToast({
											title: '支付失败',
											icon: 'none'
										});
										// setTimeout(() => {
										// 	uni.navigateTo({
										// 		url: `/pages_pay/dzf/index`
										// 	});
										// }, 2000);
									}
								})
							})
						}



						// #ifdef APP
						console.log(wxpay)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: wxpay.timeStamp,
							nonceStr: wxpay.nonceStr,
							package: wxpay.package,
							signType: 'MD5',
							paySign: wxpay.paySign,
							success: e => {
								uni.showToast({
									title: '支付成功'
								});
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/my/index'
									});
								}, 2000);
							},
							fail: e => {
								console.log(e)
								uni.showToast({
									title: '支付失败'
								});

							}
						});
						// #endif


						if (this.form.type == 2) {
							this.toast('申请成功,等待审核')
						}


						// setTimeout(() => {
						// 	uni.switchTab({
						// 		url: '/pages/my/index'
						// 	})
						// }, 1000)

					}
					console.log(res)
				})
			}
		}
	}
</script>
<style lang="less">
	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 500rpx;
		height: 500rpx;
		margin-left: -270rpx;
		margin-top: -270rpx;
		border: 10px solid white;
		background-color: white;
		z-index: 1002;
		overflow: auto;
	}

	.popup_content_wx {
		position: fixed;
		bottom: 30%;
		left: 50%;
		width: 500rpx;
		height: 200rpx;
		margin-left: -270rpx;
		margin-top: -270rpx;
		border: 10px solid white;
		background-color: white;
		z-index: 10002;
		overflow: auto;
	}

	.popup_title {
		width: 480rpx;
		text-align: center;
		font-size: 32rpx;
	}



	.popup_textarea {
		width: 410rpx;
		font-size: 26rpx;
		margin-left: 20rpx;
	}

	.popup_button {
		color: #fff;
		font-size: 36rpx;
		height: 40rpx;
		line-height: 40rpx;
	}

	.padding-sm {

		display: flex;
		justify-content: center;
	}

	.add {
		background-color: rgb(239, 239, 239);
		font-family: "SimHei";

		.add-form {

			.uni-column {
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1rpx solid rgb(239, 239, 239);
				position: relative;
				background-color: #ffffff;
				padding: 0 30rpx;

				.title {
					width: 130rpx;
					display: inline-block;
					float: left;
					color: #171717;
					font-size: 30rpx;

				}

				.uni-input {
					height: 80rpx;
					padding-right: 40rpx;
				}

				.picker {
					height: 80rpx;
					padding-right: 40rpx;
				}

				.right-icon {
					width: 40rpx;
					text-align: right;
					position: absolute;
					right: 30rpx;
					top: 0;
				}

				.address-info {
					width: 50%;
				}

				.checkBtn {
					display: inline-block;
					float: right;
				}
			}

			.uni-btn-v {
				margin: 30rpx;

				button {
					background-color: #fc0603;
					color: #ffffff;
				}
			}
		}
	}
</style>

<style lang="scss" scoped>
	.userinfo {
		display: flex;
		flex-direction: column;
		background-color: white;
		padding: 20rpx;
		margin: 30rpx 20rpx;
		border-radius: 20rpx;

		.user {
			display: flex;
			flex-direction: row;
			align-items: center;

			.info {
				margin-left: 20rpx;
				color: #333333;
				font-weight: 600;
				font-size: 32rpx;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				margin-right: 20rpx;

				.vip {
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 24rpx;
					margin-top: 15rpx;

					.viptext {
						margin-left: 10rpx;
						color: #333333;
						font-weight: normal;
					}
				}
			}
		}

		.tip {
			font-size: 28rpx;
			color: #666666;
			margin: 20rpx;
		}
	}

	.card {
		.swiper {
			height: 1500rpx;

			.vip-card {
				display: flex;
				flex-direction: column;
				margin: 10rpx;
				background-color: white;
				border-radius: 20rpx;

				.head {
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 20rpx;
					background-color: #FF9900;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					color: white;
					font-size: 32rpx;
				}

				.cont {
					width: 100%;
					padding: 20rpx;

					.item {
						width: 100%;

						.item-head {
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							padding: 10rpx;
							border-top-left-radius: 20rpx;
							border-top-right-radius: 20rpx;
							color: white;
							font-size: 28rpx;
						}

						.item-cont {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							height: 140rpx;
							// border: 1rpx solid #e6e6e6;
							font-size: 35rpx;
							// border-bottom-left-radius: 20rpx;
							// border-bottom-right-radius: 20rpx;
						}
					}
				}

				.grid-num {
					font-size: 32rpx;
					color: #FF9900;
				}

				.grid-text {
					font-size: 26rpx;
					color: #999999;
				}
			}
		}
	}

	.order {
		margin: 35rpx 20rpx;
		background-color: white;
		border: 1rpx solid #F8F8F8;
		padding: 20rpx;
		border-radius: 10rpx;

		.cell {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20rpx 10rpx;
			font-size: 30rpx;

			.title {
				width: 180rpx;
				color: #666666;
			}

			.cont {
				display: flex;
				flex: 1;
				flex-direction: row;
				justify-content: flex-end;
				color: #F44C01;
				color: 32rpx;
			}
		}

		.order-head {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #F8F8F8;
		}

		.pay {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20rpx;

			.left {
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
		}
	}
</style>